<template>
  <dt-modal-edit ref="editRef" title="项目确认" @ok="onOk" okText="立即确认" width="80%" style="top: 20px">
    <div class="tips">
      <Icon type="ios-alert" color="#2D61F4" class="tips_icon" />
      请确认项目信息、有效期、功能包及账号个数。确认后，项目将在有效期起始日正式生效
    </div>
    <div class="sureBox">
      <dt-info :label-width="120" ref="proInfo"></dt-info>
      <Tabs v-model="permissionVal" @on-click="getTab" type="card">
        <TabPane label="期内套餐" name="1">
          <div class="permissionCon">
            <div class="permissionBox" v-for="item in duringPackage" :key="item.id">
              <div class="permiss">
                <p class="p1">
                  {{ item.title }}
                  <span @click="searchPermission(item)">查看权限</span>
                </p>
                <p class="p2">
                  {{ item.internalContent }}
                </p>
              </div>
            </div>
          </div>
        </TabPane>
        <TabPane label="期外套餐" name="2">
          <div class="permissionCon">
            <div class="permissionBox" v-for="item in extraPackage" :key="item.id">
              <div class="permiss">
                <p class="p1">
                  {{ item.title }}
                  <span @click="searchPermission(item)">查看权限</span>
                </p>
                <p class="p2">
                  {{ item.internalContent }}
                </p>
              </div>
            </div>
          </div>
        </TabPane>
      </Tabs>
      <dt-info :label-width="120" ref="proInfo2"></dt-info>
    </div>
    <permission-tree ref="permissionTreeRef"></permission-tree>
  </dt-modal-edit>
</template>

<script setup>
  import { reactive, ref } from 'vue'
  import dt from '@dt/dt'
  import permissionTree from './permissionTree'
  import { editOpt, refuelingOpt } from '../biz/proSureOpt'
  import apiMgr from '../biz/index.js'
  import router from '@/router'
  const [editRef] = [ref()]

  const proInfo = ref()
  const proInfo2 = ref()

  const infoVal = ref({})
  const permissionTreeRef = ref()
  const permissionVal = ref('1')

  const duringPackage = ref()
  const duringPackageIds = ref()
  const extraPackage = ref()
  const extraPackageIds = ref()

  function show(val) {
    console.log(val, 'vvvvvvvvvvvvvvvvvvv')

    infoVal.value = val
    // infoVal.value.cityName = infoVal.value.city.join('/')
    proInfo.value.init(new editOpt(), infoVal.value)
    proInfo2.value.init(new refuelingOpt(), infoVal.value)

    duringPackage.value = infoVal.value.duringPackage.filter((item) => item.checked)
    duringPackageIds.value = duringPackage.value.map((item) => item.id)

    extraPackage.value = infoVal.value.extraPackage.filter((item) => item.checked)
    extraPackageIds.value = extraPackage.value.map((item) => item.id)
    console.log(duringPackage, duringPackageIds, extraPackage, extraPackageIds, '内外')

    editRef.value.show()
  }
  const getTab = () => {}
  function searchPermission(val) {
    permissionTreeRef.value.show(val.id, val.title)
  }

  function onOk() {
    let params = {
      accountNumber: infoVal.value.accountNumber,
      belongUserName: infoVal.value.belongUserName,
      belongUserPhone: infoVal.value.belongUserPhone,
      cityCode: infoVal.value.peopleCity[1],
      companyId: infoVal.value.companyId,
      duringPackageIds: duringPackageIds.value,
      effectEndDate: infoVal.value.effectEndDate,
      effectStartDate: infoVal.value.effectStartDate,
      extraPackageIds: extraPackageIds.value,
      provinceCode: infoVal.value.peopleCity[0],
      remark: infoVal.value.remark,
      tenantName: infoVal.value.tenantName,
      tenantStatus: 2
    }
    apiMgr.saveTenantForWeb(params).then((res) => {
      dt.ui.Modal.info({
        title: '项目确认成功',
        okText: '我知道了',
        content:
          res == 2
            ? `项目确认成功，并将于“${infoVal.value.effectStartDate}”起正式生效`
            : `项目确认成功并已正式生效，<br/>生效日期：${infoVal.value.effectStartDate}`,
        onOk: () => {
          router.push({
            path: '/tenant/package/project/list'
          })
        }
      })
    })
  }

  defineExpose({ show })
</script>

<style lang="scss" scoped>
  .tips {
    padding: 5px 10px;
    line-height: 32px;
    font-size: 14px;
    background: rgba(254, 252, 236, 1);

    .tips_icon {
      font-size: 20px;
      color: #0f42a7;
      vertical-align: sub;
    }
  }
  .formBox {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap; /* 设置换行 */
    > * {
      width: 49%;
    }
  }
  .sureBox {
    // max-height: 500px;
    // max-height: calc(100% - 200px);
    max-height: 70vh;
    overflow-x: hidden;
    overflow-y: auto;
    .title {
      position: relative;
      padding-left: 16px;
      margin: 10px 0;
    }
    .title::before {
      content: '';
      width: 8px;
      height: 16px;
      background: #2d61f4;
      position: absolute;
      left: 0;
      top: 4px;
    }

    .infoBox {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      flex-wrap: wrap; /* 设置换行 */
      p {
        width: 49%;
        span {
        }
      }
    }
    .permissionCon {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      flex-wrap: wrap; /* 设置换行 */
      .permissionBox {
        border: 1px #eee solid;
        width: 49%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 20px;
        margin-bottom: 10px;
        .checkCon {
          width: 20px;
        }
        .permiss {
          flex: 1;
          .p1 {
            font-size: 14px;
            font-weight: bold;
            span {
              font-weight: normal;
              color: #2d61f4;
              cursor: pointer;
            }
          }
          .p2 {
            line-height: 2;
            margin-top: 10px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2; /* 设置最大行数为2 */
            overflow: hidden;
            text-overflow: ellipsis; /* 文本超出显示省略号 */
          }
        }
      }
    }
  }
</style>
